<!-- 组合式API下的钩子函数 使用练习 -->
<script setup>
  //  1.创建阶段：setup（）函数
  console.log("1.创建阶段")
  const message = "Welcome to Vue!"
  function fn() {
    console.log("调用函数")
  }

  // 在组件运行伊始开启一个定时器
  const timerId = setInterval(() => {
    console.log("Hello World!")
  }, 1000);

  // console.log(message)
  // console.log(fn)

  // 2.挂载阶段：
  // 主要使用挂载后函数，一般用于第一时间操作DOM树
  import { onMounted, onUnmounted } from "vue"
  
  onMounted(() => {
    console.log("2.挂载阶段")
    
    // 操作DOM，将文本颜色修改为红色
    // document.querySelector('p').style.color = "red"
  })

  // 后续不论是更新阶段还是销毁阶段，使用方法都大差不差，不过此处再使用以下销毁阶段
  // 由于此处使用的是根组件，无法进行销毁，因此我仅实现代码
  // 3.销毁阶段：
  onUnmounted(() => {
    clearInterval(timerId)
  })

</script>

<template>
  <div>
    <p>message</p>
  </div>
</template>

<style scoped>

</style>